import React, {Component} from 'react'
import { Redirect } from 'react-router-dom'
import './login.less'
import { Form, Icon, Input, Button, Checkbox, message } from 'antd';
import LoginLog from './imgs/login-log.png'
import { reqLogin } from '../../api/login'
import storage from '../../utils/storage'
import memoryUtills from '../../utils/memoryUtils'

class Login extends Component{
    handleSubmit = (event) => {
        event.preventDefault()
        this.props.form.validateFields((err, values) => {
            if (!err) {
                reqLogin(values).then(res => {
                    if (res.data && res.data.code === 0) {
                        storage.setUser(values.name)
                        storage.setToken(res.data.token)
                        memoryUtills.user = values.name
                        memoryUtills.token = res.data.token
                        message.success(res.data.msg)
                        this.props.history.replace('/')
                    } else {
                        message.error(res.data.msg)
                    }
                })
            }
        });
    }
    /**
     * 对密码进行自定义校验
     * @param rule
     * @param value
     * @param callback
     */
    validatePwd = (rule, value, callback) => {
        if(!value){
            callback('请输入密码')
        } else if (value.length < 3){
            callback('密码长度不能小于3')
        } else if (!/^[a-zA-Z0-9]+$/.test(value)){
            callback('密码只能输入字母、数字、下划线')
        } else {
            callback()
        }}

    render() {
        const user = memoryUtills.user

        if (user) {
            return <Redirect to='/'/>
        }
        const form = this.props.form
        const { getFieldDecorator } = form;
        return(
            <div className='login'>
                <section className='login-content'>
                    <Form onSubmit={this.handleSubmit} className="login-form">
                        <h3 className="login-title">
                            <img src={LoginLog} alt={LoginLog}/>
                            <span className='login-top-name'></span>
                            <span>电子药检单平台</span>
                        </h3>
                        <Form.Item>
                            {getFieldDecorator('name',{
                                validateTrigger: 'onBlur',
                                rules:[
                                    {required: true, message: '请输入用户名'},
                                    {min: 3, message: '用户名长度不得低于3位'},
                                    {max: 12, message: '用户名长度不得多于12位'},
                                    {pattern: /^[a-zA-Z0-9]+$/, message: '用户名只能输入数字、字母、下划线'},
                                ]
                            })(
                                <Input
                                    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                    placeholder="用户名"
                                />
                            )}
                        </Form.Item>
                        <Form.Item>
                            {
                                getFieldDecorator('password',{
                                    validateTrigger: 'onBlur',
                                    rules: [{validator: this.validatePwd}]
                                })(
                                    <Input
                                        prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
                                        type="password"
                                        placeholder="密码"
                                    />
                                )
                            }
                        </Form.Item>
                        <Form.Item>
                           <Checkbox className='login-form-remember'>记住密码</Checkbox>
                            <a className="login-form-forgot" href="/">
                                忘记密码？
                            </a>
                            <Button type="primary" htmlType="submit" className="login-form-button">
                               登录
                            </Button>
                        </Form.Item>
                    </Form>
                </section>
                <h3 className='login-bottom-details'>Copyright 2019 国药集团医药物流有限公司. All Rights Reserved.</h3>
            </div>
        )
    }
}

const WrapLogon = Form.create()(Login)
export default WrapLogon